<template>
  <div  style="width: 100%; height: 100%; overflow-x: hidden;overflow-y: auto;">
    <van-sticky   :offset-top="90">
      <van-row style="background-color: white;padding-bottom: 5px;padding-top: 5px;">
        <van-col span="3">序号</van-col>
        <van-col span="5">站名</van-col>
<!--        <van-col span="4">时间</van-col>-->
        <van-col span="4">水位</van-col>
        <van-col span="4">水位涨幅</van-col>
        <van-col span="4">流量</van-col>
        <van-col span="4">流量涨幅</van-col>
      </van-row>
    </van-sticky>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">

      <div v-for="(item,index) in tableData" :key="item.STCD">
        <van-row>
          <van-col span="3">{{index+1}}</van-col>
          <van-col span="5">{{item.STNM}}</van-col>
<!--          <van-col span="4">{{item.TM}}</van-col>-->
          <van-col span="4">{{item.Z}}</van-col>
          <van-col span="4">{{Number(item.Z-item.ZZ).toFixed(2)}}</van-col>
          <van-col span="4">{{item.Q}}</van-col>
          <van-col span="4">{{Number(item.Q-item.QQ).toFixed(2)}}</van-col>
        </van-row>
        <van-divider />
      </div>


    </van-list>
    <div @click="onClickRight" style="position: fixed;width: 50px;height: 50px;bottom: 20px;left: 20px;z-index: 500;border-radius: 25px;background-color:#ff8827 ;">
      <van-image width="40" height="40" fit="fill" :src="imgUrl" style="margin: 5px;" />
    </div>
    <van-dialog v-model="show" title="筛选" show-cancel-button @confirm="confirm">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="水位涨幅>0米" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="水位涨幅=0米" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
          <van-cell title="水位涨幅<0米" clickable @click="radio = '3'">
            <template #right-icon>
              <van-radio name="3" />
            </template>
          </van-cell>
          <van-cell title="全部" clickable @click="radio = '4'">
            <template #right-icon>
              <van-radio name="4" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-dialog>

  </div>

</template>

<script>
import API from "../../api/api_common_r";
import { Notify } from 'vant';

  export default {
    name: "TableData",
    data() {
      return {
        imgUrl:require("../../../static/shaixuan.png"),
        finished: true,
        show: false,
        radio: '5',
        loading: false,
        tableData: [],
        jsonUrl:require("../../../static/river.json"),
      }
    },
    mounted() {
      this.getData("")
    },
    methods: {
      getData(where) {
          this.loading=true;
          where =where+ " and b.TM is not null ";

          API.getNowData({where:where}).then(res=>{
            let data=res.recordset;
            for (let i = 0; i <data.length ; i++) {
                let item=data[i].TM;
                data[i].Q=data[i].Q||0;
                data[i].QQ=data[i].QQ||0;
                data[i].Z=data[i].Z||0;
                data[i].ZZ=data[i].ZZ||0;
                if(item){
                    data[i].TM=item.replace("T"," ").substring(0,16)
                }
                for (let j = 0; j < this.jsonUrl.features.length; j++) {
                    let feture=this.jsonUrl.features[j];
                    let num=feture.properties["站码"];
                    console.log(num,data[i].STCD)

                    if(num==data[i].STCD){
                        data[i].STNM=feture.properties["站名"];
                        break;
                    }
                }
            }
            this.tableData=data;
            localStorage.setItem("datar",JSON.stringify(data))
        }).catch(err=>{
            console.log(err);
            Notify({ type: 'danger', message: '获取数据失败' });
        }).finally(()=>{
            this.loading=false;
        })
      },
      onClickRight() {
        this.show = true;
      },
      confirm() {
          let  data=JSON.parse(localStorage.getItem("datar"));

          switch (this.radio) {
              case "1":
                  this.tableData=data.filter( item =>{ return (item.Z-item.ZZ)>0});
                  break;
              case "2":
                  this.tableData=data.filter( item =>{ return (item.Z-item.ZZ)==0});
                  break;
              case "3":
                  this.tableData=data.filter( item =>{ return (item.Z-item.ZZ)<0});
                  break;
              case "4":
                  this.tableData=data;
                  break;
              default:break;
          }
      }
    }
  }
</script>

<style>
</style>
